<template>
    <div class="version-control-box">
        <transition>
            <div class="version-control-transition" v-if="show">
                <div class="version-control-form" :style="{width: width + 'px'}">
                    <div class="version-control-title">{{ version.title }}</div>
                    <div v-html="version.content" class="version-control-content scroll"></div>
                    <div class="version-control-btn">
                        <div class="version-control-ignore" @click="handleIgnore">忽略</div>
                        <div class="version-control-download" @click="handleDownload">下载</div>
                        <div @click="handleClose">关闭</div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
export default {
    data() {
        return {
            version : {},
            params : {},
            isNew : false,
            name : '',
            show : false,
            width : document.body.clientWidth * 0.6
        };
    },
    mounted(){
        this.show = true
    },
    methods : {
        handleIgnore(){
            this.ignore(this.version)
            this.handleClose()
        },
        handleDownload(){
            this.download(this.version, this.name)
            this.handleClose()
        },
        handleClose(){
            if (!this.show) {
                return
            }
            this.show = false
            setTimeout(() => {
                this.close()
                this.$destroy()
            }, 500)
        },
    }
};
</script>

<style lang='scss' scoped>
.version-control-box{
    z-index: 999999999;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    backdrop-filter: blur(10px);
    justify-content: center;
    display: flex;
    align-items: center;
    .v-enter-active,
    .v-leave-active {
        transition: all .5s ease;
    }

    .v-enter,
    .v-leave-to {
        opacity: 0 !important;
        width: 0px !important;
    }

    .v-leave,
    .v-enter-to {
        opacity: 1 !important;
        width: 60% !important;
    }
    .version-control-transition{
        width: 60%;
        height: calc(60% + 70px);
        overflow: hidden;
        border-radius: 10px;
        position: relative;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
    .version-control-form{
        height: 100%;
        background: #fff;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        padding-bottom: 70px;
        box-sizing: border-box;
        .version-control-title{
            text-align: center;
            height: 50px;
            line-height: 50px;
            font-size: calc(1vw + 2px);
            font-weight: 900;
            box-shadow: 1px 0px 2px 0 rgba(0, 0, 0, 0.2);
        }
        .version-control-content{
            box-sizing: border-box;
            overflow-y: auto;
            overflow-x: hidden;
            margin: 0 5px;
            padding: 20px;
            width: calc(100% - 10px);
            height: calc(100% - 70px);
        }
        .version-control-btn{
            display: flex;
            height: 70px;
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 0;
            justify-content: end;
            box-sizing: border-box;
            padding: 0 10px;
            &>div{
                width: calc(80px + 1%);
                height: 50px;
                line-height: 50px;
                text-align: center;
                box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
                cursor: pointer;
                margin: 0 10px;
                border-radius: 10px;
                background: #fff;
            }
            &>div:hover{
                box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
            }
            .version-control-download{
                background: #ff7800;
                color: #fff;
            }
            .version-control-ignore{
                color: #fff;
                background: #f1b786;
            }
        }
    }
}
.scroll::-webkit-scrollbar {
    width: 3px;
}

.scroll::-webkit-scrollbar-button {
    width: 3px;
}

.scroll::-webkit-scrollbar-track {
    background: #F1F1F1;
    border-radius: 20px;
}

.scroll::-webkit-scrollbar-track-piece {
    background: #F1F1F1;
    border-radius: 20px;
}

.scroll::-webkit-scrollbar-thumb {
    background: #D8D8D8;
    border-radius: 50px;
}

.scroll::-webkit-scrollbar-corner {
    background: #fff;
}

.scroll::-webkit-scrollbar-resizer {
    background: #fff;
}
</style>
